<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>Title</title>



</head>
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="js/d3.v5.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
    <script src="js/newScatter.js"></script>
    <script src="js/chart.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>

.node rect {
    cursor: move;
    fill-opacity: .9;
    shape-rendering: crispEdges;
}

.node text {
    pointer-events: none;
    text-shadow: 0 1px 0 #fff;
}

.link {
    fill: none;
    stroke: #000;
    stroke-opacity: .2;
}

.link:hover {
    stroke-opacity: .5;
}

</style>

<body>
    <div  class="container-fluid" style="width: 1220px;height: 1000px;margin: 0 auto;background: #E6E6FA;">
        <div class="row" >
          <div class="col-md-1"  style="width: 1210px;height: 80px; overflow: auto ;margin: 5px;background: #FFFFFF;text-align:center">
              <h1>虚分类可视化视图</h1>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">
             <div class="row">
                 <div calss = "col-md-3" id="chart" style="width: 300px;height: 400px; overflow: auto ;background: #FFFFFF;margin-left: 5px;">
                     类别
                 </div>
                  <div calss = "col-md-3" style="width: 300px;height: 195px; overflow: auto ;background: #FFFFFF;margin-left: 5px;margin-top: 5px;">
                      <table border="2">
                        <tr>
                            <th>CLASS</th>
                            <th>A</th>
                            <th>B</th>
                        </tr>
                        <tr>
                            <th>A</th>
                            <th><input type="button" onclick=" chooseAA()" value="AA"></th>
                            <th><input type="button" onclick="testBA()" value="BA"></th>
                        </tr>
                        <tr>
                            <th>B</th>
                            <th><input type="button" onclick="testAB()" value="AB"></th>
                            <th><input type="button" onclick="testBB()" value="BB"></th>
                        </tr>
                    </table>
                 </div>
             </div>
          </div>

            <div id="ScatterDiv" class="col-md-3" style="width: 600px;height: 600px; overflow: auto ;background: #FFFFFF;margin-left: 5px;">

             </div>

            <div class="col-md-3" style="width: 300px;height: 600px; overflow: auto ;background: #FFFFFF;margin-left: 5px;">
                 细节
            </div>
        </div>

        <div class="row">
          <div class="col-md-6" style="width: 1210px;height: 300px; overflow: auto ;background: #FFFFFF;margin-left: 5px;margin-right: 5px;margin-top: 5px;" >
              <h2>迭代</h2>
          </div>
        </div>

    </div>
<script>
        //定义初始量
        const dataset=[];//全局变量
        //读取CSV文件 获得坐标点
        d3.csv('data/AB11.csv').then(data=>{
            data.forEach( d => {
                d['X'] = +(d['X']);
                d['Y'] = +(d['Y']);
                d['label1'] = +(d['label1']);
                d['label2'] = +(d['label2']);
                d['label3'] = +(d['label3']);
            })
            // console.log(data)
            data.forEach(datum => {
                dataset.push(datum);
            //console.log(sequential)
            });
            //初始化我们的比例尺和坐标轴
           drawNewScatter(data);
        });




 function chooseAA(){
            renewscatter(dataset,1);
        }
        function testBA(){
            renewscatter(dataset,2);
        }
        function testAB(){
            renewscatter(dataset,3);
        }
        function testBB(){
            renewscatter(dataset,4);
        }

    </script>
</body>
</html>